<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script th:src="@{/static/echarts/echarts.min.js}"></script>
    <script th:src="@{/static/echarts/china.js}"></script>
    <script th:src="@{/static/echarts/jquery-1.11.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/admin/style.css}" media="all">
    <script type="text/html" id="indexTpl">
        {{d.LAY_TABLE_INDEX+1}}
    </script>

    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
</head>

<!--&lt;!&ndash;layui公共模块&ndash;&gt;-->
<!--<div th:include="commonmenu :: menu"></div>-->
<body>



<!--                    放入地图-->
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div  id="main" style="width: 700px;height:600px;top:50%;left:20%;margin-left: -20px;margin-top: 10px;text-align:center; " ></div>








<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var dataList = [];

    // 指定图表的配置项和数据
    option = {
        title: {
            text: "中国疫情图",
            left: "center",
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
            orient: "vertical",
            left: "left",
            data: ["中国疫情图"],
        },
        visualMap: {
            type: "piecewise",
            pieces: [
                {
                    min: 1000,
                    max: 9999999,
                    label: "大于等于1000人",
                    color: "#EC2005FF",
                },
                { min: 500, max: 999, label: "确诊500-999人", color: "#4e160f" },
                { min: 100, max: 499, label: "确诊100-499人", color: "#974236" },
                { min: 10, max: 99, label: "确诊10-99人", color: "#ee7263" },
                { min: 1, max: 9, label: "确诊1-9人", color: "#f5bba7" },
            ],
            color: ["#ec2005", "#E09107", "#A3E00B"],
        },
        toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },
        roamController: {
            show: true,
            left: "right",
            //   mapTypeControl: {
            //     china: true,
            //   },
        },
        // bmap: {
        //   //
        // },
        geo: {
            //地理坐标系组件用于地图的绘制
            map: "china",
            roam: false, //不开启缩放和平移
            label: {
                normal: {
                    show: true,
                    fontSize: "10",
                    color: "rgba(0,0,0,0.7)",
                },
            },
            itemStyle: {
                normal: {
                    borderColor: "rgba(0, 0, 0, 0.2)",
                },
                emphasis: {
                    areaColor: "#F3B329", //鼠标选择区域颜色
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
            },
        }
    };

    // 发送ajax请求
    $.ajax({
        // 发送请求的地址
        url:'/query',
        // 返回的数据类型
        dataType: "json",
        success: function (data){
            for (let i in data){
                //将dataList中的每一项数据都变成data里的数据
                dataList[i] = data[i];
            }
            myChart.setOption({
                series: [
                    {
                        name: "确诊病例",
                        type: "map",
                        geoIndex: 0,
                        data: dataList
                    }
                ]
            })
        }
    });


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


</script>

</body>
</html>